<template>
    <div class="box">

        <div class="notice-box">
            <div class="check">
                <el-tooltip class="box-item" effect="dark" content="增加自习目标" placement="bottom">
                    <el-button plain @click="addTargetVisible = true" class="btn">+</el-button>
                </el-tooltip>
            </div>
            <hr>
            <div class="notice-list">
                <div v-if="notiseList == ''" style="margin: 20px; color:rgb(117 117 117);">暂无目标，赶快去制定目标吧~</div>
                <div class="notice" v-for="(item, index) in notiseList" :key="index">

                    <div class="title">
                        <span>{{ item.targetName }}</span>
                    </div>
                    <hr>
                    <div class="content-box">
                        <div class="content" style="white-space: pre-line;">
                            {{ item.targetDetails }}
                        </div>
                        <div class="handle">
                            <el-button type='primary' text='primary'
                                @click="check(item.targetId, item.targetName, item.targetDetails)">修改</el-button>
                            <el-button type='danger' text='danger' @click="deleteOne(item.targetId)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加自习任务目标对话框 -->
        <el-dialog v-model="addTargetVisible" title="添加自习任务目标" width="500" align-center>

            <el-form :model="form1" :rules="rules1" ref="formRef1">
                <el-form-item prop="targetName" label="目标标题">
                    <div>
                        <el-input v-model="form1.targetName" style="width: 300px" placeholder="请输入标题" />
                    </div>
                </el-form-item>

                <el-form-item prop="targetDetails" label="目标内容">
                    <div class="detail">
                        <el-input v-model="form1.targetDetails" style="width: 380px" :rows="12" type="textarea"
                            placeholder="请输入内容" />
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="addTargetVisible = false">取消</el-button>
                        <el-button type="primary" @click="addNew">
                            确定
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>

        </el-dialog>

        <!-- 修改自习任务目标对话框 -->
        <el-dialog v-model="updateTargetVisible" title="修改自习任务目标" width="500" align-center>

            <el-form :model="form2" :rules="rules2" ref="formRef2">
                <el-form-item prop="targetName" label="目标标题">
                    <div>
                        <el-input v-model="form2.targetName" style="width: 300px" placeholder="请输入标题" />
                    </div>
                </el-form-item>

                <el-form-item prop="targetDetails" label="目标内容">
                    <div class="detail">
                        <el-input v-model="form2.targetDetails" style="width: 380px" :rows="12" type="textarea"
                            placeholder="请输入内容" />
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="updateTargetVisible = false">取消</el-button>
                        <el-button type="primary" @click="update">
                            确定
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { selectAllTarget, addTarget, deleteTarget, updateTarget } from '../api/task';
import { useRoute } from 'vue-router'

const route = useRoute()

const formRef1 = ref(null)
const formRef2 = ref(null)

const form1 = reactive({
    targetName: '',
    targetDetails: '',
})
const form2 = reactive({
    targetName: '',
    targetDetails: '',
})

const rules1 = {
    targetName: [
        {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
        },
    ],
    targetDetails: [
        {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
        },
    ],
}

const rules2 = {
    targetName: [
        {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
        },
    ],
    targetDetails: [
        {
            required: true,
            message: '内容不能为空',
            trigger: 'blur'
        },
    ],
}

let userId = route.query.id;
const notiseList = ref()
//获取自习目标(先调这个接口)
const selectAllTargetList = () => {
    // console.log(userId,'id');
    selectAllTarget(userId).then(res => {
        if (res.code === 200) {
            //把获取到的任务数据赋值给notiseList
            notiseList.value = res.data.reverse()
        } else if (res.code === 500) {
            notiseList.value = ''
        }

    })
}

const addTargetVisible = ref(false)
//添加自习目标
const addNew = () => {
    //验证输入是否为空
    formRef1.value.validate((valid) => {
        if (!valid) {
            return false
        }
        addTargetVisible.value = false
        //调增加任务接口
        addTarget({ targetName: form1.targetName, targetDetails: form1.targetDetails, userId: userId }).then(res => {
            if (res.message === "success") {
                //成功的话要调用获取自习任务目标接口重新渲染页面
                selectAllTargetList()
                form1.targetName = ''
                form1.targetDetails = ''
            }
        })
    })
}

//删除自习目标
const deleteOne = (id) => {
    deleteTarget(id).then(res => {
        if (res.message === 'success') {
            alert('删除成功')
            //成功的话要调用获取自习任务目标接口重新渲染页面
            selectAllTargetList()
        } else {
            alert('删除失败')
        }
    })
}

let tId = ref()
const updateTargetVisible = ref(false)
//点击修改后，表单可以显示内容
const check = (id, name, detail) => {
    form2.targetName = name
    form2.targetDetails = detail
    tId.value = id
    updateTargetVisible.value = true
}

//修改目标
const update = () => {
    formRef2.value.validate((valid) => {
        if (!valid) {
            return false
        }
    })
    //调用修改目标接口
    updateTarget({
        targetId: tId.value,
        targetName: form2.targetName,
        targetDetails: form2.targetDetails
    }).then(res => {
        if (res.message === 'success') {
            updateTargetVisible.value = false
            //成功的话要调用获取自习任务目标接口重新渲染页面
            selectAllTargetList()
            alert('修改成功')
        }
    })
}

//要在onMounted生命周期获取任务列表
onMounted(() => {  
    selectAllTargetList()
})

</script>

<style scoped>
.box {
    margin: 16px 16px 0 16px;
}

.check {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.check div {
    margin-right: 30px;
}

.notice-box {
    background-color: #fff;
    margin: 20px 0;
    padding-bottom: 20px;
    width: 100%;
}

.notice-box .btn {
    font-size: 24px;
    margin: 12px 20px;
    background-color: #409eff;
    color: #fff;
}

.notice-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.notice {
    box-shadow: 2px 2px 6px #b8b6b6;
    margin: 20px;
    width: 390px;
    border-radius: 4px;
}

.notice .title {
    position: relative;
    display: flex;
    align-items: center;
    margin: 6px 4px;
    font-weight: 700;
    font-size: 18px;
    color: #5a5a5a;
}

.notice .title .el-icon {
    position: absolute;
    top: -12px;
    right: -4px;
}

.notice .title span {
    margin-left: 6px;
}

.content-box .content {
    padding: 6px 20px 20px 20px;
    height: 230px;
    overflow: scroll;
}

.content-box .content::-webkit-scrollbar {
    display: none
}

.handle {
    display: flex;
    justify-content: flex-end;
    margin: 4px 10px;
}

.detail {
    display: flex;
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>